<script setup lang="ts" name="ComponentDemoCenter">
import { ref, computed } from 'vue'
import { RouterLink } from 'vue-router'

// 组件分类定义
interface ComponentCategory {
  id: string
  name: string
  icon: string
  description: string
  color: string
  components: ComponentInfo[]
}

interface ComponentInfo {
  id: string
  name: string
  description: string
  route: string
  icon: string
  status: 'stable' | 'beta' | 'experimental'
}

// 组件分类配置
const componentCategories = ref<ComponentCategory[]>([
  {
    id: 'common',
    name: '通用组件',
    icon: '🧩',
    description: '常用的基础组件，适用于各种场景',
    color: 'primary',
    components: [
      {
        id: 'user-avatar',
        name: 'UserAvatar',
        description: '用户头像组件，支持多种尺寸和状态',
        route: '/demo/user-avatar',
        icon: '👤',
        status: 'stable',
      },
      {
        id: 'code-demo',
        name: 'CodeDemo',
        description: '代码演示组件，支持代码高亮和预览',
        route: '/demo/code-demo',
        icon: '💻',
        status: 'stable',
      },
      {
        id: 'modal',
        name: 'Modal',
        description: '通用弹窗组件，支持多种尺寸和样式',
        route: '/demo/modal',
        icon: '🪟',
        status: 'stable',
      },
      {
        id: 'login-form',
        name: 'LoginForm',
        description: '登录表单业务组件，支持多种配置',
        route: '/demo/login-form',
        icon: '📝',
        status: 'stable',
      },
      {
        id: 'login-modal',
        name: 'LoginModal',
        description: '登录弹窗组件，支持多种登录方式',
        route: '/demo/login-modal',
        icon: '🔐',
        status: 'stable',
      },
    ],
  },
  {
    id: 'comment',
    name: '评论组件',
    icon: '💬',
    description: '评论系统相关组件，支持多种交互方式',
    color: 'secondary',
    components: [
      {
        id: 'comment-item',
        name: 'CommentItem',
        description: '单个评论项组件，支持点赞、回复等操作',
        route: '/demo/comment',
        icon: '💭',
        status: 'stable',
      },
      {
        id: 'comment-list',
        name: 'CommentList',
        description: '评论列表组件，支持分页和筛选',
        route: '/demo/comment-list',
        icon: '📝',
        status: 'beta',
      },
      {
        id: 'comment-system',
        name: 'CommentSystem',
        description: '完整的评论系统组件',
        route: '/demo/comment-system',
        icon: '🗨️',
        status: 'beta',
      },
      {
        id: 'comment-editor',
        name: 'CommentEditor',
        description: '评论编辑器组件，支持富文本编辑',
        route: '/demo/comment-editor',
        icon: '✏️',
        status: 'experimental',
      },
    ],
  },
  {
    id: 'form',
    name: '表单组件',
    icon: '📝',
    description: '表单输入相关组件',
    color: 'info',
    components: [
      {
        id: 'search-input',
        name: 'SearchInput',
        description: '搜索输入框组件',
        route: '/demo/search-input',
        icon: '🔍',
        status: 'stable',
      },
      {
        id: 'theme-switcher',
        name: 'ThemeSwitcher',
        description: '主题切换组件',
        route: '/demo/theme-switcher',
        icon: '🎨',
        status: 'stable',
      },
    ],
  },
])

// 当前选中的分类
const activeCategory = ref<string>('common')

// 获取当前分类
const currentCategory = computed(() => {
  return (
    componentCategories.value.find((cat) => cat.id === activeCategory.value) ||
    componentCategories.value[0]
  )
})

// 切换分类
const switchCategory = (categoryId: string) => {
  activeCategory.value = categoryId
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colors = {
    stable: 'success',
    beta: 'warning',
    experimental: 'error',
  }
  return colors[status as keyof typeof colors] || 'neutral'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const texts = {
    stable: '稳定',
    beta: '测试',
    experimental: '实验',
  }
  return texts[status as keyof typeof texts] || '未知'
}
</script>

<template>
  <div class="component-demo-center min-h-screen bg-gradient-to-br from-base-100 to-base-200">
    <div class="max-w-7xl mx-auto p-8">
      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-base-content mb-4">
          <span class="text-5xl mr-3">🧩</span>
          组件演示中心
        </h1>
        <p class="text-lg text-base-content/70">
          探索我们的 Vue 组件库，发现各种实用的组件和它们的使用方法
        </p>
      </div>

      <!-- 分类导航 -->
      <div class="mb-8">
        <div class="flex flex-wrap gap-3 justify-center">
          <button
            v-for="category in componentCategories"
            :key="category.id"
            @click="switchCategory(category.id)"
            class="btn gap-2 px-6 py-4 transition-all duration-200 hover:scale-105"
            :class="[
              activeCategory === category.id
                ? `btn-${category.color} shadow-lg`
                : `btn-outline btn-${category.color} hover:btn-${category.color}`,
            ]"
          >
            <span class="text-xl">{{ category.icon }}</span>
            <div class="text-left">
              <div class="font-semibold">{{ category.name }}</div>
              <div class="text-xs opacity-70">{{ category.description }}</div>
            </div>
          </button>
        </div>
      </div>

      <!-- 组件列表 -->
      <div class="space-y-6">
        <div class="bg-base-100 rounded-3xl p-8 border border-base-300/30 shadow-xl">
          <div class="flex items-center gap-3 mb-6">
            <span class="text-3xl">{{ currentCategory.icon }}</span>
            <div>
              <h2 class="text-2xl font-semibold text-base-content">{{ currentCategory.name }}</h2>
              <p class="text-base-content/70">{{ currentCategory.description }}</p>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <RouterLink
              v-for="component in currentCategory.components"
              :key="component.id"
              :to="component.route"
              class="group block"
            >
              <div
                class="bg-base-200/50 rounded-2xl p-6 hover:bg-base-200 transition-all duration-200 hover:scale-105 hover:shadow-lg"
              >
                <div class="flex items-start gap-4">
                  <div class="text-3xl">{{ component.icon }}</div>
                  <div class="flex-1">
                    <div class="flex items-center gap-2 mb-2">
                      <h3
                        class="text-lg font-semibold text-base-content group-hover:text-primary transition-colors"
                      >
                        {{ component.name }}
                      </h3>
                      <div
                        class="badge badge-sm"
                        :class="`badge-${getStatusColor(component.status)}`"
                      >
                        {{ getStatusText(component.status) }}
                      </div>
                    </div>
                    <p class="text-sm text-base-content/70">{{ component.description }}</p>
                  </div>
                </div>
                <div class="mt-4 flex items-center justify-between">
                  <span class="text-xs text-base-content/50">点击查看演示</span>
                  <span class="text-primary group-hover:translate-x-1 transition-transform">→</span>
                </div>
              </div>
            </RouterLink>
          </div>
        </div>
      </div>

      <!-- 使用指南 -->
      <div class="mt-8 bg-base-100 rounded-3xl p-8 border border-base-300/30 shadow-xl">
        <h2 class="text-2xl font-semibold text-base-content mb-6 text-center">📚 使用指南</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- 快速开始 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content flex items-center gap-2">
              <span class="text-lg">🚀</span>
              快速开始
            </h3>
            <div class="space-y-2 text-sm text-base-content/70">
              <div>1. 选择您需要的组件分类</div>
              <div>2. 点击组件卡片查看演示</div>
              <div>3. 复制代码到您的项目中</div>
              <div>4. 根据需要自定义样式</div>
            </div>
          </div>

          <!-- 组件状态 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content flex items-center gap-2">
              <span class="text-lg">📊</span>
              组件状态
            </h3>
            <div class="space-y-2 text-sm">
              <div class="flex items-center gap-2">
                <div class="badge badge-success badge-sm">稳定</div>
                <span class="text-base-content/70">生产环境可用</span>
              </div>
              <div class="flex items-center gap-2">
                <div class="badge badge-warning badge-sm">测试</div>
                <span class="text-base-content/70">功能基本完善</span>
              </div>
              <div class="flex items-center gap-2">
                <div class="badge badge-error badge-sm">实验</div>
                <span class="text-base-content/70">功能开发中</span>
              </div>
            </div>
          </div>

          <!-- 技术支持 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content flex items-center gap-2">
              <span class="text-lg">🛠️</span>
              技术支持
            </h3>
            <div class="space-y-2 text-sm text-base-content/70">
              <div>• 查看组件 API 文档</div>
              <div>• 参考示例代码</div>
              <div>• 提交 Issue 反馈问题</div>
              <div>• 参与组件改进讨论</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.component-demo-center {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

/* 按钮动画 */
.btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  transform: translateY(-2px);
}

/* 卡片悬停效果 */
.group:hover .bg-base-200\/50 {
  background-color: hsl(var(--b2) / 0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .component-demo-center {
    padding: 1rem;
  }

  .btn {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
  }
}
</style>
